<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <script src="/js/jquery-3.6.0.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <script src="/js/vue.global.js"></script>
    <script type="text/javascript">
        $(function(){
            const app = {
                data(){
                    return {
                        counter:10
                    }
                }
            }
            Vue.createApp(app).mount('#app')

            const app2 = {
              data() {
                return {
                  name: 'Runoob'
                }
              },
              methods: {
                greet(event) {
                  alert('Hello ' + this.name + '!')
                  if (event) {
                    alert(event.target.tagName)
                  }
                }
              }
            }
            Vue.createApp(app2).mount('#app2')

            const app3 = {
              methods: {
                say(message) {
                  alert(message)
                },two(event) {
                  alert("第二个事件处理器逻辑...")
                }
              }
            }
            Vue.createApp(app3).mount('#app3')
        })
    </script>
</head>
<body>
<div id="app">
  <button @click="counter += 1">增加</button>
  <p>这个按钮被点击了 {{ counter }} 次。</p>
</div>
<br>
<div id="app2">
  <button @click="greet">点我</button>
</div>
<br>
<div id="app3">
  <button @click="say('hi'), two($event)">Say hi</button>
  <br>
  <button @click="say('what')">Say what</button>
</div>
</body>
</html>